<template>
	<div class="shezhi">
		<div class="graybg"></div>

		<div class="header header_bg">
			<div class="header_left">
				<i onclick="javascript:history.back(-1)" class="iconfont baiColor">&#xe612;</i>
			</div>
			<div class="header_center">
				<span class="baiColor">实名认证</span>
			</div>
			<div class="header_right clearfix">
				<em class="baiColor pull-right"   @click="save" v-if="JSON.stringify(infos) == '{}'" style="font-size: 16px;display: block;width: 50px;height: 30px;">保存</em>
				<!--<em class="baiColor pull-right"   @click="save" v-if="status != 1" style="font-size: 16px;display: block;width: 50px;height: 30px;">保存</em>-->
			</div>
		</div>
		<div class="center" style="padding-top: 47px;">
			<div class="xians">
				<section>
					<p class="pull-left">
						<span>姓名</span>
					</p>
					<p class="pull-right" v-if="JSON.stringify(infos) != '{}'">
						<!--<input type="text"  v-model="infos.name" class=""/>-->
						<span v-text="infos.name"></span>
						<i class="iconfont">&#xe615;</i>
					</p>
					<input v-else type="text" placeholder="输入姓名" class="pull-right" v-model="name" required="required"></input>
				</section>
				<!-- 验证手机号是否输的正确 -->
				<section :class="isNum === true ? 'active':''">
					<p class="pull-left">
						<span>手机号码</span>
					</p>
					<p class="pull-right" v-if="JSON.stringify(infos) != '{}'">
						<span>{{infos.phone}}</span>
						<i class="iconfont">&#xe615;</i>
					</p>
					<input v-else type="number" @blur="blurPhone" ref="input_phone" required="required" minlength="7" placeholder="输入手机号码" class="pull-right" v-model="tele"></input>
				</section>
				<section>
					<p class="pull-left">
						<span>性别</span>
					</p>
					<p class="pull-right" v-if="JSON.stringify(infos) != '{}'">
						<span>{{infos.sex}}</span>
						<i class="iconfont">&#xe615;</i>
					</p>
					<p v-else class="pull-right">
						<select name="sex" v-model="sex">
							<option v-for="option in options" v-bind:value="option.value">
								{{ option.text }}
							</option>
						</select>
					</p>
				</section>
			</div>
			<div class="xians">
				<section>
					<p class="pull-left">
						<span>证件类型</span>
					</p>
					<p class="pull-right">
						<span>身份证</span>
					</p>
				</section>
				<section :class="isNumC === true ? 'active':''" class="last">
					<p class="pull-left">
						<span>证件号码</span>
					</p>
					<p class="pull-right" v-if="JSON.stringify(infos) != '{}'">
						<span>{{infos.idno}}</span>
						<i class="iconfont">&#xe615;</i>
					</p>
					<p v-else class="pull-right">
						<input type="text" placeholder="请输入身份证号" required="required" ref="input_card" @blur="blurCard" minlength="15" maxlength="18" v-model="numbers"></input>
						<i class="iconfont">&#xe615;</i>
					</p>
				</section>
			</div>
			<section>
				<p class="pull-left  groups_left">
					<span>所在地区</span>
				</p>
				<p class="pull-right groups ellipsis01" v-if="JSON.stringify(infos) != '{}'">
					<span>{{infos.site}}</span>
					<i class="iconfont">&#xe615;</i>
				</p>
				<p v-else class="pull-right groups ellipsis01" style="text-align: right;height: 40px;line-height: 38px;">
					<!--<input type="text" placeholder="河南省郑州市" required="required" v-model="value4"></input>
					<i class="iconfont">&#xe615;</i>-->
						<x-address title="" v-model="value" raw-value :list="addressData" >
						</x-address>
						<p class="particular" :value="getName(value)"></p>
				</p>
			</section>
			<section class="last">
				<p class="pull-left">
					<span>详细地址</span>
				</p>
				<p class="pull-right" v-if="JSON.stringify(infos) != '{}'">
					<span>{{infos.street}}</span>
					<i class="iconfont">&#xe615;</i>
				</p>
				<p v-else class="pull-right">
					<input type="text" placeholder="街道、楼牌号等" required="required" v-model="areadetail"></input>
					<i class="iconfont">&#xe615;</i>
				</p>
			</section>
		</div>
		<!--底部tab-->
		<div id="footer">
			<div class="footer">
				<div class="footer_each footer_home">
					<router-link to="/iIndex">
						<p><i class="iconfont">&#xe60d;</i></p>
						<p>头条</p>
					</router-link>
				</div>
				<div class="footer_each footer_enter">
					<router-link to="/wShares">
						<p><i class="iconfont">&#xe67f;</i></p>
						<p>股红</p>
					</router-link>
				</div>
				<div class="footer_each footer_indent">
					<router-link to="/wmyfriend">
						<p><i class="iconfont">&#xe60f;</i></p>
						<p>聊天</p>
					</router-link>
				</div>
				<div class="footer_each footer_my">
					<router-link to="/imy">
						<p><i class=" iconfont  footer_action">&#xe66c;</i></p>
						<p class="footer_action">我的</p>
					</router-link>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { XInput, Group, XButton, Cell } from "vux";
	import { XAddress, ChinaAddressV4Data, Value2nameFilter as value2name } from 'vux'

	export default {
		data() {
			return {
				status:"",
				isNum: false,	//验证手机号
				isNumC: false,	//验证身份证
				errcard: false,	
				errphone: false,
				value: ['广东省', '中山市', '--'],	//默认地址
				value1:[],	//想服务端发送地址数据
				addressData: ChinaAddressV4Data,	//中国地址
				tele: '',	//手机号
				name: '',	//姓名
				//性别默认选择男
				sex: '1',	//性别
				options: [{
						value: '1',
						text: '男'
					},
					{
						value: '2',
						text: '女'
					},
				],
				//暂时先这样写着
				numbers: '',	//身份证号	
				num: '',	//发往后台身份证号
				city: '',	
				areadetail: '',	//详细地址
				infos: {},	//从后台获取的数据
			}
		},
		components: {
			XInput,
			Group,
			XAddress,
			XButton,
			Cell,
		},
		mounted: function() {
			var params = new URLSearchParams();
			var info = window.localStorage.data;
			this.$axios({
				url: 'One/My/realTrue',
				method: "GET",
				params: {
					token: info
				}
			}).then((res) => {
//				this.status = res.data.status;	
				if(res.data.status == 1){
					this.infos = res.data.data
					if(this.infos.sex == '1') {
						this.infos.sex = '男'
					} else if(this.infos.sex == '2') {
						this.infos.sex = '女'
					}
//					//对身份证信息的保密
					var str = (this.infos.idno).substr(1, (this.infos.idno).length - 2)
					this.infos.idno = (this.infos.idno).replace(str, '****************')
				}
				
			}).catch((err) => {
				console.log(err)
			})
		},
		methods: {
			//地址插件的一种转换方法
			getName (value){
               this.value1 = value2name(value, ChinaAddressV4Data)
            },
            
			//用*换身份证中间的数字
			number: function() {
				this.num = this.numbers;
				var str = (this.numbers).substr(1, (this.numbers).length - 2)
				this.numbers = (this.numbers).replace(str, '****************')
			},

			//验证身份证号
			blurCard: function() {
				var testCard = new RegExp(/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/)
				var cardValue = this.$refs.input_card.value;
				if(testCard.test(cardValue) && cardValue != '') {
					this.isNumC = false;
					this.number();
				} else {
					this.isNumC = true;
					this.numbers = "";
				}
			},
			//验证手机号
			blurPhone: function() {
				var testPhone = new RegExp(/^1((3[0-9]{1})|(45)|(47)|(5[0-9]{1})|(76)|(77)|(78)|(8[0-9]{1}))\d{8}$/);
				var PhoneValue = this.$refs.input_phone.value;
				if(testPhone.test(PhoneValue) && PhoneValue != "") {
					this.isNum = false;
				} else {
					this.isNum = true;
					this.tele = "";
				}
			},
			//保存
			save: function() {
				if(this.tele == "" || this.name == "" || this.sex == "" || this.num == "" || this.value1 == "" || this.areadetail == "" ){
					alert("实名认证信息不能为空")
				}else{
					var params = new URLSearchParams();
					var info = window.localStorage.data;
					params.append('token', info); //客户秘钥（信息）
					params.append('phone', this.tele);	//手机号
					params.append('name', this.name);	//名字
					params.append('sex', this.sex);	//性别-默认男
					params.append('idno', this.num);	//身份证号	
					params.append('site', this.value1);	//地址
					params.append('street', this.areadetail);	//详细地址
					this.$axios({
						url: "One/My/realTrue",
						method: "POST",
						data: params
					}).then((res) => {
						if(res.data.status == 1){
							alert("保存成功")
							this.$router.push("imy");
						}else{
							alert("保存失败");
						}
					}).catch(function(err) {
						console.log(err)
					})
				}
				
			}
		}
	}
</script>

<style scoped="scoped">
	@import "../css/public.css";
	
	/*地址插件的位置*/
	.groups_left{
		width:25%;
		min-width: 90px;
	}
	.groups {
		width: 60%;
		height:40px;
		line-height: 38px;
	}
	/*审核失败可编辑*/
	.inputstyle{
		color:#999;
		font-size: 16px;
	}
	
	form {
		overflow: hidden;
	}
	
	form .right {
		float: right;
	}
	
	form .sele {
		width: 30%;
		color: #999;
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		margin-right: 12px;
	}
	
	form .right option {
		font-size: 16px;
	}
	
	input {
		text-align: right;
		height: 40px;
		line-height: 40px;
	}
	
	.pull-left span {
		height: 40px;
		line-height: 40px;
		padding-left: 9px;
	}
	
	.pull-right span {
		height: 40px;
		line-height: 40px;
	}
	
	.center {
		width: 95%;
		margin: 0px auto;
	}
	
	.center section {
		color: #333;
		font-size: 16px;
		background: #fff;
		height: 40px;
		border-bottom: solid 0.5px #f0f0f0;
	}
	
	section.active {
		border: solid .5px red;
		height: 40px;
	}
	
	.xians {
		border-bottom: solid 4px #f0f0f0;
	}
	
	.center section p i {
		width: 22px;
		height: 21px;
	}
	
	.center section .pull-left i {
		padding: 0 10px;
		color: #F3961F;
	}
	
	.center section .pull-right {
		padding-right: 9px;
		color: #999;
		font-size: 16px;
		text-align: right;
	}
	
	.center section .pull-right i {
		width: 10px;
		height: 18px;
	}
	
	.center section select {
		color: #999;
		height: 40px;
		font-size: 16px;
	}
	
	input::-webkit-input-placeholder {
		color: #999;
		font-size: 16px;
	}
	
</style>